<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>课程详情</title>

  <link rel="stylesheet" href="./CSS/courseIndex.css">
</head>

<body>
  <div id="app">
    <div class="head">
      <div class="container" style="display: flex;align-items: center;justify-content: space-between;">
        <div class="logoBox">
          <div class="logoimage">
            <img src="./image/logo.png" style="width: 100%;height: 100%;">
          </div>
          <div class="logoText">
            <img src="./image/mynameLogo.png" style="width: 100%;height: 100%;">
          </div>
          <div class="backTocourse" @click="backToCourse()">
            返回首页
          </div>
        </div>
        <div class="userBox">
          <div class="userImage">
            <img :src="userMsg.uurl" style="width: 100%;height: 100%;">
          </div>
          <div class="userName">
            {{userMsg.username}}
          </div>
        </div>
      </div>
    </div>

    <div class="body">
      <div class="container courseMsg">
        <div class="courseImage">
          <img :src="subjectMsg.subject.surl" style="width: 100%" height="100%">
        </div>
        <div class="coursemsg">
          <p class="courseName">{{subjectMsg.subject.sname}}</p>
          <p class="coursePrice">课程价格:<span
              style="color: red;font-size: 22px;margin-left: 10px; font-weight: bold;">{{subjectMsg.subject.price}}￥</span> </p>
          <p class="courseTeacher">授课教师:<span style="margin-left: 10px; color: rgb(77, 75, 75);">{{subjectMsg.user.username}}</span> </p>
          <button class="courseBuy" @click="addCart">加入购物车</button>

        </div>
      </div>

      <div class="container xiangxi">
        <div class="xiangqiang">
          <div class="title">课程介绍</div>
          <div class="courseIntro">
            {{subjectMsg.subject.desc}}
          </div>


          <div class="title" style="margin-top: 30px;">课程留言</div>
          <div class="Msgboards">
            <div class="myLiulan">
              <div class="userTouxiang" style="overflow: hidden;">
                <img :src="userMsg.uurl" style="width: 100%;height: 100%;">
              </div>
              <input type="text" class="liuyanInput" v-model="liulanDes">
              <button class="submit" @click="submitMessage" >发布</button>
            </div>



            <div class="messageItem" v-for="(item,i) in userPingLunlist" :key="i">
              <div class="messageUserimage" style="overflow: hidden;">
                <img :src="item.user.uurl" style="width: 100%;height: 100%;">
              </div>
              <div class="message">
                <p class="messageUsername">{{item.user.username}}</p>
                <p class="liulan">{{item.desc}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>


    <div class="footer"></div>
  </div>

  <script src="./JS/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      created(){
        const userMsg = JSON.parse(sessionStorage.getItem("user"))

        if(userMsg!=null){
          const sid = this.getCanshu("sid");
          this.sid = sid
          this.getSubjectMsg(sid)
          this.userMsg = userMsg
          this.getMessage(sid)
        }
        else {
          location.href="./login.html"
        }
      },
      data: {
        userMsg:{},
        sid:-1,
        liulanDes:'',

        subjectMsg:{},
        userPingLunlist:[]
      },
      methods: {

        getMessage(sid){
          axios({
            method: "post",
            url:'/Indenture/message/list',
            data: {
              sid:sid,
            },
          }).then((res)=>{

            this.userPingLunlist = res.data.messages
          })
        },
        addCart(){
          axios({
            method: "post",
            url:'/Indenture/shoppingcartInsert',
            data: {
              sid:this.sid,
              uid:this.userMsg.uid
            },
          }).then((res)=>{
            alert(res.data.Msg)
          })
        },

        submitMessage(){
          if(this.liulanDes==''){
            alert("请先输入")
          }
          else {
            axios({
              method: "post",
              url:'/Indenture/message/insert',
              headers:{
                'Content-Type': 'application/x-www-form-urlencoded'
              },
              data: {
                uid:this.userMsg.uid,
                sid:this.sid,
                desc:this.liulanDes
              },
            }).then((resr)=>{
                this.getMessage(this.sid)
            })

            this.liulanDes = ''
          }
        },
        getSubjectMsg(sid){
          axios({
            method: "post",
            url:'/Indenture/subjectListById',
            data: {
              sid:sid
            },
          }).then((res)=>{
            console.log(res.data)
            this.subjectMsg = res.data.subjectMsg
          })
        },

        getCanshu(name){
          var  reg =  new  RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
          var  r = window.location.search.substr(1).match(reg);
          if(r!=null)  return  unescape(r[2]);  return  null;
        },
        backToCourse() {
          location.href = './curriculum.html'
        }
      }


    })
  </script>
</body>

</html>